@import 'util.sass'

\:host
  display: block

.viewer

  &-wrapper
    border: 1px solid $border-mute
    border-radius: 4px

    h3
      margin-top: 10px

  &-title
    height: 48px
    align-content: center
    align-items: center
    display: flex
    justify-content: center
    padding: 8px 20px

    &-button
      @include flex-xy-center
      cursor: pointer

      &:hover

        .fui-icon
          fill: $brand-primary

    &-spacer
      flex: 1 1 auto
      color: $text-default
      font-size: 20px

  &-source
    position: relative
    border-bottom: 1px solid $border-default

    &-copy
      position: absolute
      top: 48px
      right: 20px
      z-index: 1

    &-editor
      height: 400px
      border-top: 1px solid $border-default

  &-body
    padding: 20px 30px
